<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
        <h1>Event</h1>
        <!-- .once 只触发一次 -->
        <button type="button" v-on:click.once="age++">涨一岁</button>
        <!-- v-on: 可以简写为@ -->
        <button type="button" @click="subtract">减一岁</button>
        <!-- dblclick 双击事件 -->
        <button type="button" @dblclick="subtract()">减一岁</button>
        <!-- 传参 -->
        <button type="button" @click="add(2)">涨两岁</button>
        <p>Age is {{age}}</p>

        <!-- JS原生事件 -->
        <div id="canvas" @mousemove="updateXY">
            {{x}} ,{{y}} - 
            <!-- <span @mousemove="stopMoving"> Stop Moving </span> -->
            <!-- 事件修饰符 -->
            <span @mousemove.stop=""> Stop Moving </span>
        </div>
        <!-- .prevent 阻止默认事件 -->
        <a @click.prevent="alert()" href="https://blog.sone.vip">Blog</a>
    </div>
    <script src="app.js"></script>
</body>
</html>